<template>
	<view class="uploadCon">
		<view class="img" v-if="imgUrl != ''" @mouseover="mouseOver" @mouseleave="mouseLeave">
			<el-image class="imgUrl" fit="cover" :src="imgUrl"></el-image>
			<i class="el-icon-delete delete" v-if="ifDelete" @click="uploadRemove"></i>
		</view>
		<view class="upload" @click="upload" v-if="imgUrl == ''">
			<i class="el-icon-plus uploadAdd"></i>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uploadImage",
		data() {
			return {
				ifDelete: false,
			};
		},
		props: {
			imgUrl: {
				type: String
			}
		},
		methods: {
			mouseOver() {
				this.ifDelete = true
			},
			mouseLeave() {
				this.ifDelete = false
			},
			// 删除图片
			async uploadRemove() {
				var that = this
				let arr = that.imgUrl
				arr = arr.split(',')
				return await uniCloud.callFunction({
					name: 'removeImage',
					data: {
						imgUrl: arr
					}
				}).then(res => {
					that.$notify({
						title: '提示',
						message: '删除成功',
						type: 'success'
					});
					that.$emit('update:imgUrl', '')
				})
			},
			// 上传图片
			upload() {
				var that = this
				new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						success: res => {
							const path = res.tempFilePaths[0]
							let ext
							// #ifdef H5
							ext = res.tempFiles[0].name.split('.').pop()
							const options = {
								filePath: path,
								cloudPath: Date.now() + '.' + ext
							}
							resolve(options)
							// #endif
							// #ifndef H5
							uni.getImageInfo({
								src: path,
								success(info) {
									const options = {
										filePath: path,
										cloudPath: Date.now() + '.' + info.type
											.toLowerCase()
									}
									resolve(options)
								},
								fail(err) {
									reject(new Error(err.errMsg || '未能获取图片类型'))
								}
							})
							// #endif
						},
						fail: () => {
							reject(new Error('Fail_Cancel'))
						}
					})
				}).then((options) => {
					uni.showLoading({
						title: '文件上传中...'
					})
					return uniCloud.uploadFile({
						...options,
						onUploadProgress(e) {
							console.log(e)
						}
					})
				}).then(res => {
					uni.hideLoading()
					// that.imgUrl = res.fileID
					that.$emit('update:imgUrl', res.fileID)
					that.$notify({
						title: '提示',
						message: '上传成功',
						type: 'success'
					});
				}).catch((err) => {
					uni.hideLoading()
					console.log(err);
					if (err.message !== 'Fail_Cancel') {
						uni.showModal({
							content: `图片上传失败，错误信息为：${err.message}`,
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uploadCon {
		.img {
			width: 296upx;
			height: 296upx;
			overflow: hidden;
			background-color: #fff;
			position: relative;
			border: 1px solid #c0ccda;
			border-radius: 6px;
			box-sizing: border-box;
			display: inline-block;

			.imgUrl {
				width: 100%;
				height: 100%;
			}

			.delete {
				position: absolute;
				top: 50%;
				left: 50%;
				color: #FFF;
				font-size: 60upx;
				transform: translate(-50%, -50%);
			}
		}

		.upload {
			width: 296upx;
			height: 296upx;
			border-radius: 6px;
			border: 2upx dashed #C0C0C0;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;

			.uploadAdd {
				font-size: 60upx;
			}
		}

		.upload:hover {
			border: 2upx dashed #00BFFF;
		}
	}
</style>
